import Vue from "vue"
import VueRouter from "vue-router"
import discover from "../pages/discover"
import friend from "@/pages/friend"
//将vueRouter注入到所有的vue子组件

Vue.use(VueRouter)

//路由配置routes

//配置路由3个步骤

//1.创建页面组件

//2.配置rotes，一个数组，数组中每个对象基本属性path，component

//3.将router-view路由视图组件放到正确的位置

//路由懒加载（路由按需加载），主要通过import（）这种语法，vue-cli是基于webpack，wepack编译的时候，遇到了import（）这种语法就会自动的将代码进行分割，split-code，实现懒加载的核心就是使用webpack的代码分割功能

//懒加载的好处：提高首屏的加载速度，提升用户体验，节省流量

//动态路由：驾驶通过切换路径，来达到传递参数的目的

let routes = [
    {
       path:"/discover",
       component:discover,
       //重定向
       redirect:"/discover/playlist",
       children:[
        {
            //children中选项的path最前面不能加 "/"
            path:"playlist",
            component: () => import("@/pages/discover/playlist"),
            name:"playlist"
        },
        {
            path:"djradio",
            component: () => import("@/pages/discover/djradio")
        }
       ]
    },
    {
        path:"/friend/:lf",
        component:friend
    },
    {
        path:"/mine",
        component:() => import(/*webpackChunkName:"mine" */"@/pages/mine"),
        //具名路由
        name:"mine"
    },
    {
        path:"/list",
        component: () => import("@/pages/list")
    },
    {
        path:"/detall/:productid",
        //路由参数解耦合
        props:true,
        component: () => import("@/pages/detall")
    },
    {
        path:"*",
        component:()=> import("@/pages/page404")
    }
    
];

//实例化vue路由

let router = new VueRouter({
    mode:"abstract",
    routes
})

export default router